<template>
    <div>
        <el-card>
            <!--分类和搜索查询-->
            <div class="searchDish">
                <el-input placeholder="请输入内容" v-model="searchInfo.query" class="input-with-select">
                    <el-select
                            @change="changeDishCategory"
                            v-model="searchInfo.cid"
                            slot="prepend"
                            placeholder="请选择" >
                        <el-option label="全部" :value="null"></el-option>
                        <el-option
                                v-for="category in categoryList"
                                :label="category.categoryName"
                                :value="category.cid"></el-option>
                    </el-select>
                    <el-button slot="append"  style="background-color: #FFc300" icon="el-icon-search" @click="getDishList"></el-button>
                </el-input>
                <el-button
                    type="warning"
                    class="categoryBtn"
                    @click="openDishClassificationDialog"
                    >分类管理</el-button>
                <el-button
                          type="primary"
                          class="addDishBtn"
                          @click="openAddDishDialog">添加图书</el-button>
            </div>
            <el-table
                    v-loading="isLoading"
                    :data="dishList"
                    border
                    style="width: 100%"
                    stripe
                    >
                <!--展开列-->
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-form label-position="left" class="demo-table-expand">
                            <el-descriptions title="图书信息" border>
                                <el-descriptions-item>
                                    <template slot="label">
                                        <i class="el-icon-food"></i>
                                        图书名
                                    </template>
                                    {{scope.row.title}}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                        <i class="el-icon-money"></i>
                                        图书价格
                                    </template>
                                    ￥{{scope.row.price}}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                        <i class="el-icon-data-board"></i>
                                        图书分类
                                    </template>
                                    <el-tag>{{scope.row.dishCategory.categoryName}}</el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item :span="3">
                                    <template slot="label">
                                        <i class="el-icon-data-analysis"></i>
                                        图书介绍
                                    </template>
                                    {{scope.row.description}}
                                </el-descriptions-item>
                                <el-descriptions-item :span="3">
                                    <template slot="label">
                                        <i class="el-icon-picture"></i>
                                        图书图片
                                    </template>
                                    <el-image
                                            style="width: 200px;"
                                            :src="scope.row.imgUrl"
                                            :preview-src-list="[scope.row.imgUrl]">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        type="index"
                        :index="1"
                        label="编号"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="图书名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="dishCategory.categoryName"
                        label="所属分类">
                </el-table-column>
                <el-table-column
                        prop="sellVolume"
                        label="图书销量">
                </el-table-column>
                <!--是否上架-->
                <el-table-column label="是否上架">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.oversell"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                >
                        </el-switch>
                    </template>
                </el-table-column>
                <!--操作-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                class="yellowBtn"
                                @click="showUpdateDishDialog(scope.row.did)"
                                >
                        </el-button>
                        <el-button
                                icon="el-icon-delete"
                                type="danger"
                                @click="deleteDish(scope.row.did)"
                                >
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 15]"
                    :page-size="searchInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :current-page="searchInfo.pagenum">
            </el-pagination>
        </el-card>
      <!--添加图书组件-->
      <AddDish></AddDish>
      <!--更新图书组件-->
      <UpdateDish></UpdateDish>
      <!--添加图书分类组件-->
      <AddDishClassification></AddDishClassification>
        <!--查看图片-->
        <el-dialog width="30%" :visible.sync="showUploadImgDialog">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>

</template>

<script>
import AddDish from "@/components/AddDish";
import UpdateDish from "@/components/UpdateDish";
import AddDishClassification from "@/components/AddDishClassification";

export default {
        name: "Dish",
        components:{
          AddDish,
          UpdateDish,
          AddDishClassification
        },
        data(){
            return {
                //查询参数
                searchInfo:{
                    query:'',
                    cid:null,
                    pagesize:5,
                    pagenum:1
                },
                dishList:[],
                categoryList:[],
                total:0,
                uploadUrl:'http://127.0.0.1:8122/orderSystem/dish/uploadDishImg',
                showUploadImgDialog:false,
                dialogImageUrl:'',
                did:{did:''},
                isLoading:true




            }
        },
        methods:{
            //查询所有图书信息
           async getDishList(){
             this.isLoading=true
              const {data:res}=await this.$http.get("/dish/findDishes",{params:this.searchInfo})
               if (res.status!=200)return this.$message.error("查询图书信息失败")
               this.dishList=res.data.dishes
               this.total=res.data.total
              this.isLoading=false
            },
            //每页大小发生变化时
            handleSizeChange(newSize){
               this.searchInfo.pagesize=newSize
                this.getDishList()
            },
            //页数发生变化时
            handleCurrentChange(newPage){
               this.searchInfo.pagenum=newPage
                this.getDishList()
            },
            //查询所有分类信息
            async getCategoryList(){
              const {data:res}=await this.$http.get("/category/findCategorys")
                if (res.status!=200)return this.$message.error("查询分类信息失败")
                this.categoryList=res.data
            },
            //图书分类改变时查询
            changeDishCategory(){
               this.searchInfo.query='';
               this.searchInfo.pagesize=5;
               this.searchInfo.pagenum=1;
                this.getDishList()
            },
            //查看图片
            handlePictureCardPreview(url,status) {
                this.dialogImageUrl=url
                this.showUploadImgDialog = status;
            },
            //删除图书
            deleteDish(did){
                this.$confirm('此操作将永久删除该图书, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {data:res}=await this.$http.delete("/dish/deleteDish/"+did)
                    if (res.status!==200)return this.$message.error("删除图书失败！")
                    this.$message.success("删除图书成功！")
                    await this.getDishList()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //打开修改图书页面
            showUpdateDishDialog(did){
              this.$bus.$emit("changeUpdateDishDialog",did,true);
            },
            //打开添加图书窗口
            openAddDishDialog(){
              this.$bus.$emit("changeAddDishDialog",true)
            },
            //打开添加分类窗口
            openDishClassificationDialog(){
                this.$bus.$emit("addDishClassification",true);
            },
          //校验权限
          checkRolePower(pid){
            return this.$checkRolePower(pid);
          }
        },
        mounted() {
            //添加图书图片预览
            this.$bus.$on("addDishPicturePreview",this.handlePictureCardPreview)
            //更新当前视图
            this.$bus.$on("updatingDishView",this.getDishList)
            this.getDishList()
            this.getCategoryList()
        }
    }
</script>

<style scoped>
    .input-with-select{
        width: 400px;
    }
    .el-select{
        width: 130px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand  {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .searchDish {
        margin-bottom: 20px;
    }
    .el-table{
        margin-bottom: 20px;
    }
    .addDishBtn{
        float: right;
        margin-right: 30px;
    }
    .chooseCategory{
        width: 200px;
    }

    .categoryBtn{
        float: right;
        margin-right: 30px;
    }
    .yellowBtn {
      background-color: #FFc300;
    }
</style>
